<template>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="item in list" :key="item.id" @click="toDetail(item.id)">
                    <div class="itemimg">
                        <!-- <img v-lazy="item.image" alt=""> -->
                        <img :src="item.image" alt="">
                    </div>
                    <div class="iteminfo">
                        <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                        <p class="price">￥ {{ item.price }}</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request.js'

const list = ref([])
const loading = ref(false) // 加载状态
const finished = ref(false) // 是否加载完成
const pagination = ref(1) // 页码
const isLoading = ref(false) // 下拉刷新的状态
const router = useRouter()
const onLoad = () => {
    loading.value = true
    request.get('/list', {
        params: {
            pagination: pagination.value, // 变量
            pageNum: 10
        }
    }).then(res => {
        if (res.data.code == 200) {
            // res.data.data永远只有10条数据
            // this.list = res.data.data

            // 数组拼接  concat  
            // this.list = this.list.concat(res.data.data)
            // es6中数组的扩展
            list.value = [...list.value, ...res.data.data]
        }
        // 关闭loading
        loading.value = false
        // 页码+1
        pagination.value++
        // 判断是否还有数据
        if (list.value.length >= res.data.total) {
            // 数据请求完毕
            finished.value = true
        }
    })
}
const onRefresh = () => {
    // 下拉的时候展示loading
    // 延时一秒后关闭loading,同时展示刷新成功
    isLoading.value = true
    setTimeout(() => {
        isLoading.value = false
    }, 1000)
}
const toDetail = (id) => {
    router.push(`/detail/${id}`) // es6中的模板字符串
}
</script>
<style lang="scss" scoped>
@mixin pd ($top, $right, $bottom, $left) {
    padding: $top $right $bottom $left;
}

ul {
    // overflow: hidden; // 解决高度塌陷
    column-count: 2; // 列数
    column-gap: 10px; // 列间距
    @include pd(6px, 4px, 6px, 4px);

    li {
        // float: left;
        // width: 49%;
        // margin: 0.5%;
        break-inside: aviod; //  避免在元素内部换行

        .itemimg {
            img {
                width: 100%;
            }
        }

        .iteminfo {
            @include pd(2px, 8px, 2px, 8px);

            .price {
                color: red;
            }

        }
    }
}
</style>